<!--
 * @Author: wanglianxin 532445330@qq.com
 * @Date: 2023-11-09 11:42:22
 * @LastEditors: wanglianxin 532445330@qq.com
 * @LastEditTime: 2023-11-19 23:00:05
 * @FilePath: /src/pages/Markdown/Markdown.vue
 * @Description: markdown模板
-->
<template>
  <div class="markdown-body" v-html="markdownHtml"></div>
</template>
<script setup lang="ts">
import { watch, ref } from "vue";
import { components, Component } from "./index";
//处理参数
const props = defineProps(["componentName"]);
const emit = defineEmits(["update"]);
const markdownHtml = ref("");
console.log(props);
watch(
  () => props.componentName,
  (value) => {
    console.log(value);
    markdownHtml.value = components.find(
      (item: Component) => item.key === value
    ).markdown;
  },
  { immediate: true }
);
</script>
<style scoped lang="scss">
.markdown-body {
  ::v-deep(table) {
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    width: 100%;
    overflow: auto;
    word-break: normal;
    word-break: keep-all;
    thead {
      background-color: #f8f8f8;
    }
    th {
      font-weight: 700;
    }
    td,
    th {
      padding: 6px 13px;
      border: 1px solid #ddd;
    }
    tbody {
      tr {
        background-color: #fff;
        border-top: 1px solid #ccc;
        &:nth-child(2n) {
          background-color: #f8f8f8;
        }
      }
    }
  }
}
</style>
